<template>
  <div>
    <div class="container">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <span class="iconfont jiudain">&#xe612;</span>酒店
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.cityName}}酒店预订</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 城市筛选 -->
      <CitySearch
        ref="CitySearchRef"
        @citySearch="citySearch"
        @gethotelList="getCityhotelList"
        :data="hotelList"
      />
      <!-- 酒店筛选 -->
      <FilterHotel />
      <!-- 酒店item -->

      <div v-if="hotelList.length">
        <HotelItem :data="item" v-for="item in hotelList" :key="item.id" />
      </div>

      <div v-loading="loading">
        <div v-if="hotelList.length==0" class="nodata">暂时没有酒店</div>
      </div>
      <!-- 分页 -->
      <el-pagination
        background
        v-if="hotelList.length"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        layout=" total,prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import CitySearch from '@/components/hotel/CitySearch'
import FilterHotel from '@/components/hotel/FilterHotel'
import HotelItem from '@/components/hotel/HotelItem'
import axiosRetry from 'axios-retry'
export default {
  components: {
    CitySearch,
    FilterHotel,
    HotelItem,
  },
  data() {
    axiosRetry(this.$axios, { retries: 3 });
    return {
      loading: true,
      cityName: '广州市',
      dialogVisible: false,
      hotelList: [],
      scenicList: [],
      total: 0,
      pageIndex: 1,
      cityData: {},
      cityId: 197,
    }
  },
  methods: {
    handleCurrentChange(newPage) {
      this.pageIndex = newPage;
      this.citySearch(this.$route.query.cityName);
    },
    getCityhotelList(id) {
      this.cityId = id;
      this.citySearch(this.$route.query.cityName);
    },
    // 获取城市列表用来筛选出对应的id
    // 更新城市的id
    // 城市的三项筛选
    async citySearch(name) {
      // 更新id
      const { data: res } = await this.$axios.get('/cities', {
        params: { name: name },
      })
      if (res.data.length === 0) {
        return this.$message.error('没有当前城市')
      }
      // 当前城市对象的信息
      this.cityId = res.data[0].id;
      // 更新好id就发送更新hotelitem
      if (res) {
        var obj = { ...this.$route.query }
        delete obj.cityName
        var str = ''
        // 住宿等级
        var hotellevelArr = []
        // 住宿类型
        var hoteltypeArr = [];
        // 酒店设施
        var hotelassetArr = [];
        // 酒店品牌
        var hotelbrandArr = [];
        // / 住宿等级
        if (this.$route.query.hotellevel_in) {
          hotellevelArr = [...this.$route.query.hotellevel_in]
        }
        // 住宿类型
        if (this.$route.query.hoteltype_in) {
          hoteltypeArr = [...this.$route.query.hoteltype_in]
        }
        // 酒店设施
        if (this.$route.query.hotelasset_in) {
          hotelassetArr = [...this.$route.query.hotelasset_in]
        }
        // 酒店品牌
        if (this.$route.query.hotelbrand_in) {
          hotelbrandArr = [...this.$route.query.hotelbrand_in]
        }
        // 判断住宿等级是否是数组
        if (hotellevelArr.length > 1) {
          delete obj.hotellevel_in
          hotellevelArr.forEach((x) => {
            str += 'hotellevel_in=' + x + '&'
          })
        }
        // 判断住宿类型是否是数组
        if (hoteltypeArr.length > 1) {
          delete obj.hoteltype_in
          hoteltypeArr.forEach((x) => {
            str += 'hoteltype_in=' + x + '&'
          })
        }
        // 判断酒店设施是否是数组
        if (hotelassetArr.length > 1) {
          delete obj.hotelasset_in
          hotelassetArr.forEach((x) => {
            str += 'hotelasset_in=' + x + '&'
          })
        }
        // 判断酒店品牌是否是数组
        if (hotelbrandArr.length > 1) {
          delete obj.hotelbrand_in
          hotelbrandArr.forEach((x) => {
            str += 'hotelbrand_in=' + x + '&'
          })
        }
        for (var key in obj) {
          str += key + '=' + obj[key] + '&'
        }
        str += 'city=' + this.cityId + '&_start=' + (this.pageIndex - 1) * 10
        console.log(str)
        // 这里可以做判断添加筛选条件
        console.log(obj, this.cityId)
        const { data: res } = await this.$axios.get('/hotels?' + str)
        this.total = res.total
        this.hotelList = res.data
        console.log('我也是最新')
        console.log(this.hotelList)
        // 每次更新数据就更新地图
        this.$refs.CitySearchRef.getmap(this.hotelList);
      }
    },
  },
  watch: {
    $route: {
      handler: function () {
        if (this.$route.query.cityName) {
          // 不为空时
          this.citySearch(this.$route.query.cityName);
        }
      },
      immediate: true,
    },
    'hotelList.length': {
      handler: function () {
        if (this.hotelList.length) {
          this.loading = false
        }else if(this.hotelList.length==0){
          setTimeout(() => {
            this.loading = false
          }, 2000);
        }
      },
      immediate: true,
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  min-width: 1000px;
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}
.jiudain {
  color: #0d3f70;
  margin-right: 5px;
}
.el-pagination {
  margin-top: 20px;
}
.nodata {
  height: 200px;
  text-align: center;
  line-height: 200px;
}
</style>